<script setup>
import commonForm from '@/components/commonForm.vue';
import {
  addFlowAsync
} from '@/api/flowManagement.js';

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  //角色id
  roleInfo: {
    type: Object,
    default: {}
  }
})

const emit = defineEmits(['closeAddDialog'])

const handleClose = () => {

  emit('closeAddDialog', false)
}


//保存/更新
const handleUpdate = () => {
  formRef.value.validForm(saveRoleInfo)
}

const saveRoleInfo = async () => {
  try {
    console.log('%c [  ]-41', 'font-size:13px; background:pink; color:#bf2c9f;', formData.value)
    const fileFormData = new FormData()
    fileFormData.append('name', formData.value.name)
    fileFormData.append('file', formData.value.file)

    const res = await addFlowAsync(fileFormData)
    if (res && res.code + '' === '200') {
      ElMessage.success('部署成功')
      emit('closeAddDialog', true)
    } else if (res && res.code + '' === '504') {
      ElMessage.error(res.msg)
    }

  } catch (error) {
    console.log('%c [ error ]-42', 'font-size:13px; background:pink; color:#bf2c9f;', error)
  }

}

const dialogVisible = computed(() => props.visible)


//表单配置项
const optionList = ref([
  {
    data: {
      label: 'xml文件',
      prop: 'file',
    },
    component: 'xmlFileUpload',
  }
])

//表单回显数据
const optionData = computed(() => props.roleInfo)

//表单校验规则
const optionRuleList = ref({
  file: [{ required: true, message: '请上传xml文件', trigger: 'blur' }],

})


const formRef = ref(null)
const formData = ref({})

const updateFormData = (data) => {
  formData.value = data
}

</script>

<template>
  <div class="dialog-container">
    <el-dialog v-model="dialogVisible" title="流程部署" width="500" :before-close="handleClose" align-center
      :close-on-click-modal="false" :close-on-press-escape="false" :center="true" :destroy-on-close="true">
      <el-card>
        <commonForm ref="formRef" :optionList="optionList" :optionRuleList="optionRuleList" :optionData="optionData"
          @updateFormData="updateFormData">
        </commonForm>
      </el-card>

      <template #footer>
        <div class="dialog-footer">
          <el-button class="btn-green" type="primary" @click="handleUpdate">
            保存
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-button) {
  color: #fff;
  width: 100px;
  height: 35px;
  font-size: 16px;
  border-color: #c6c6c6;
}
</style>